<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>分期</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }
        body{
            background-color: #f8f8f8;
        }
        .page {
            background-color: #f8f8f8;
        }
        
        .back-btn {
            width: 25px;
            padding-right: 10px;
            margin-right: 15px;
            display: block;
            border-right: 1px solid #E0E0E0;
        }
        
        .weui-panel__bd .weui-cell__bd p {
            color: #303030;
        }
        
        .weui-panel__bd .weui-cell__ft {
            width: 30px;
            height: 30px;
            background: url() center no-repeat;
            background-size: cover;
        }
        /*提示*/
        
        .weui-icon-info-circle {
            color: #10AEFF;
        }
        
        .weui-media-box__desc {
            font-size: 12px;
        }
        
        .weui-media-box__desc a {
            color: #10AEFF;
        }
        /*修复label上界限 没有紧靠左边*/
        
        .weui-cell:before {
            left: 0;
        }
        /*推荐上界限 不能紧靠左边*/
        .tuijian.weui-cell:before{
            left: 15px;
            border-top: 2px dashed #d9d9d9;
            
        }
        .tuijian.weui-cell .weui-cell__bd p{
            color: gold;
        }
        .tuijian.weui-cell .weui-cell__bd p span{
            color: #A0A0A0;
        }
        /*加推荐背景*/
       
        label.tuijian-bgc .weui-cell__bd:before{
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-top: 12px solid #44C446;
            border-left: 12px solid #44C446;
            border-right: 12px solid transparent;
            border-bottom: 12px solid transparent;
            color: #fff;
           
        }
        label.tuijian-bgc .weui-cell__bd::after{
            content: '荐';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            font-size: 12px;
        }
        label.tuijian-bgc{
            /*background-color: red;*/
        }
        /*去除手续费上边界*/
        .weui-media-box::before{
            border-top: none;
        }
        /*按钮*/
        .weui-btn{
            background-color: #10AEFF;
        }
        /*按钮下的文字*/
        .weui-btn-area .weui-media-box__desc{
            text-align: center;
            margin-top: 10px;
            font-size: 14px;
        }
        /*按钮 按下的颜色*/
        .weui-btn_primary:not(.weui-btn_disabled):active {
    color: hsla(0,0%,100%,.6);
    background-color: #10AEFF;
}
    </style>
</head>

<body>
    <div class="page input">
        <!--头部-->
        <div class="page__hd">
            <header>
                <div class="weui-panel">
                    <div class="weui-panel__bd">
                        <div class="weui-media-box weui-media-box_small-appmsg">
                            <div class="weui-cells">
                                <a class="weui-cell " href="javascript:;">
                                    <div class="weui-cell__hd">
                                        <img src=""
                                            alt="" class="back-btn"></div>
                                    <div class="weui-cell__bd weui-cell_primary">
                                        <p>账单分期</p>
                                    </div>
                                    <span class="weui-cell__ft"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>
         <!--头部 end-->
        <div class="page__bd">
            <!--输入分期金额-->
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">分期金额</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入金额">
                    </div>
                    <div class="weui-cell__ft">
                        <div class="icon-box">
                            <i class="weui-icon-info-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!--输入分期金额 end-->
            <!--中部描述-->
            <div class="weui-media-box weui-media-box_text">
                <p class="weui-media-box__desc">如有分期优惠券，仅限在优惠券限定金额内使用，<a href="">查看优惠券</a></p>

            </div>
            <!--中部描述 end-->
            <!--期数单选 start-->
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell__hd">
                    <div class="weui-cells__title">期数 每期应还(元)</div>
                </div>
                <div class="weui-cells  weui-cells_checkbox">
                    <label class="weui-cell weui-check__label tuijian-bgc" for="x11">
                        <div class="weui-cell__bd">
                            <p>3期</p>
                        </div>
                        <div class="weui-cell__ft">
                            <input type="radio" class="weui-check" name="radio1" id="x11">
                            <i class="weui-icon-checked"></i>
                        </div>
                        
                   </label>
                   <!--推荐 start-->
                   <a class="weui-cell weui-cell_access js_item tuijian" data-id="actionsheet" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>免一期手续费 <span style="float: right;">可免15.84元</span></p>
                                
                            </div>
                            <div class="weui-cell__ft">
                                
                            </div>
                    </a>
                    <!--推荐 end-->
                   
                    <label class="weui-cell weui-check__label" for="x12">
                        <div class="weui-cell__bd">
                            <p>6期</p>
                        </div>
                        <div class="weui-cell__ft">
                            <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
                            <i class="weui-icon-checked"></i>
                        </div>
                 </label>
                    <label class="weui-cell weui-check__label" for="x13">
                        <div class="weui-cell__bd">
                            <p>9期</p>
                        </div>
                        <div class="weui-cell__ft">
                            <input type="radio" name="radio1" class="weui-check" id="x13" checked="checked">
                            <i class="weui-icon-checked"></i>
                        </div>
                 </label>
                    <label class="weui-cell weui-check__label" for="x14">
                        <div class="weui-cell__bd">
                            <p>12期</p>
                        </div>
                        <div class="weui-cell__ft">
                            <input type="radio" name="radio1" class="weui-check" id="x14" checked="checked">
                            <i class="weui-icon-checked"></i>
                        </div>
                 </label>
                </div>

            </div>

            <!--期数单选 end-->
           <!--手续费-->
        <div class="weui-media-box weui-media-box_text">
            <p class="weui-media-box__desc">手续费说明<a href=""><i class="weui-icon-info-circle"></i></a></p>
        </div>
         <!--按钮-->
        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">申请分期</a>
            <p class="weui-media-box__desc">分期后05月10日还第一期</p>
            
        </div>






        </div>
         
       
    </div>

</body>

</html>